<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>首页</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <style>
        .btn-more, .more{
            cursor: pointer;
        }
    </style>
</head>

<body>

<div class="page-home app-page">

    <div class=" app-page-content">
        <div class="data app-card">
            <div class="app-card-head">
                <div class="border"></div>
                <div class="app-card-title">实时概述</div>
                <div class="app-card-subtitle">
                    更新时间：2018-12-12
                </div>
            </div>
            <div class="app-card-body">
                <div class="data-item">
                    <div class="number" th:text="${deviceCountVO.totalNum}">0</div>
                    <div class="title">终端总数量</div>
                    <a class="more" data-type="0">查看更多</a>
                </div>
                <div class="data-item">
                    <div class="number" th:text="${deviceCountVO.onlineNum}">0</div>
                    <div class="title">在线终端数</div>
                    <a class="more" data-type="1">查看更多</a>
                </div>
                <div class="data-item">
                    <div class="number" th:text="${deviceCountVO.offlineNum}">0</div>
                    <div class="title">离线终端数</div>
                    <a class="more" data-type="2">查看更多</a>
                </div>
                <div class="data-item">
                    <div class="number" th:text="${deviceCountVO.maintainNum}">0</div>
                    <div class="title">维护终端数</div>
                    <a class="more" data-type="3">查看更多</a>
                </div>
                <div class="data-item">
                    <div class="number" th:text="${deviceCountVO.predismantlingNum}">0</div>
                    <div class="title">预拆除终端数</div>
                    <a class="more" data-type="4">查看更多</a>
                </div>
            </div>
        </div>

        <div class="upgrade">
            <div class="warn-log app-card">
                <div class="app-card-head">
                    <div class="border"></div>
                    <div class="app-card-title">设备报警日志</div>
                </div>
                <div class="content">
                    <table class="z-table">
                        <tbody></tbody>
                    </table>
                </div>
                <div class="load-more">
                    <input type="hidden" name="warn-log-page-num"/>
                    <input type="hidden" name="warn-log-page-size"/>
                    <input type="hidden" name="warn-log-pages"/>
                    <button class="btn-more">加载更多</button>
                </div>
            </div>
            <div class="update-message app-card">
                <div class="app-card-head">
                    <div class="border"></div>
                    <div class="app-card-title">升级消息</div>
                </div>
                <div class="content">
                    <div class="table">
                        <table class="z-table">
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div class="load-more">
                    <input type="hidden" name="update-message-page-num"/>
                    <input type="hidden" name="update-message-page-size"/>
                    <input type="hidden" name="update-message-pages"/>
                    <button class="btn-more">加载更多</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>

<script>

    var context = $("meta[name='ctx']").attr("content");

    var timer = [[${timer}]];

    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };

    //初始化
    $(function () {

        var timeNow = new Date().Format('yyyy-MM-dd hh:mm:ss');

        $('.app-card-subtitle').text('更新时间：' + timeNow);

        //轮询
        setInterval(function () {
            polling();
        }, timer);


        //初始化终端离线报警日志
        const $warnLogParent = $('.warn-log');
        const $warnLogTbody = $warnLogParent.find('table tbody');
        warnLog($warnLogParent, $warnLogTbody);

        //初始化升级消息
        const $updateMessageParent = $('.update-message');
        const $updateMessageTbody = $updateMessageParent.find('table tbody');
        updateMessage($updateMessageParent, $updateMessageTbody);
    })

    function polling() {
        window.location.href = context + '/web/home';
    }

    function isBlank(val) {
        if (val == null) {
            return true;
        }
        if (val == '') {
            return true;
        }
        if (val == undefined) {
            return true;
        }
        if (val == 'undefined') {
            return true;
        }
        return false;
    }

    $('.btn-more').click(function () {
        const $parent = $(this).parents('.app-card');
        const $tbody = $parent.find('table tbody');
        if ($parent.hasClass('warn-log')) {
            //设备报警日志
            var pageNum = $parent.find('input[name=warn-log-page-num]').val();
            var pageSize = $parent.find('input[name=warn-log-page-size]').val();
            var pages = $parent.find('input[name=warn-log-pages]').val();
            if (isBlank(pageNum)) {
                pageNum = 1;
            } else {
                pageNum = (parseInt(pageNum) + 1);
            }
            if (pageNum > pages) {
                popup.tipsTop("没有更多设备报警日志", "warning");
                return;
            }
            warnLog($parent, $tbody, pageNum, pageSize);
        } else if ($parent.hasClass('update-log')) {
            // console.log('升级操作日志');
            // $tbody.prepend('<tr> <td> <p class="log">升级操作日志</p> <p class="info"> <span class="time">2018-8-22 12:00:00</span> <span class="user">操作人：XXX</span> </p> </td> </tr>')
        } else if ($parent.hasClass('update-message')) {
            //升级消息
            var pageNum = $parent.find('input[name=update-message-page-num]').val();
            var pageSize = $parent.find('input[name=update-message-page-size]').val();
            var pages = $parent.find('input[name=update-message-pages]').val();
            if (isBlank(pageNum)) {
                pageNum = 1;
            } else {
                pageNum = (parseInt(pageNum) + 1);
            }
            if (pageNum > pages) {
                popup.tipsTop("没有更多升级消息", "warning");
                return;
            }
            updateMessage($parent, $tbody, pageNum, pageSize);
        }
    })

    $('.more').click(function () {
        const $parent = $(this).parents('.app-card');
        const $tbody = $parent.find('table tbody');

        var type = $(this).data('type');

        if (type == '0') {
            //终端总数量
            window.location.href = context + '/deviceInfo/listByPage';
        } else if (type == '1') {
            //在线终端数
            window.location.href = context + '/deviceInfo/listByPage?onlineStatus=0';
        } else if (type == '2') {
            //离线终端数
            window.location.href = context + '/deviceInfo/listByPage?onlineStatus=1';
        } else if (type == '3') {
            //维护终端数
            window.location.href = context + '/deviceInfo/listByPage?deviceStatus=2';
        } else if (type == '4') {
            //预拆除终端数
            window.location.href = context + '/deviceInfo/listByPage?deviceStatus=1';
        }
    })

    function warnLog($parent, $tbody, pageNum, pageSize) {
        var start = new Date().getTime();
        App.ajax({
            type: "POST",
            url: context + "/deviceWarnLog/listByPage",
            data: {
                pageNum: pageNum,
                pageSize: pageSize
            },
            success: function (obj) {
                if (obj && obj.code == 0) {
                    console.log("查询报警日志耗时："+(new Date().getTime() - start));
                    var pageInfo = obj.data;
                    if (pageInfo && pageInfo.list && pageInfo.list.length > 0) {
                        $parent.find('input[name=warn-log-page-num]').val(pageInfo.pageNum);
                        $parent.find('input[name=warn-log-page-size]').val(pageInfo.pageSize);
                        $parent.find('input[name=warn-log-pages]').val(pageInfo.pages);
                        for (var i = pageInfo.list.length - 1; i >= 0; i--) {
                            $tbody.prepend('<tr>' +
                                '<td>' +
                                '<p class="log">' + (pageInfo.list[i].warnContent == null?'':pageInfo.list[i].warnContent) + '</p>' +
                                '<p class="info"><span class="time">' + (pageInfo.list[i].addTime == null?'':pageInfo.list[i].addTime) + '</span></p>' +
                                '</td>' +
                                '</tr>')
                        }
                    }
                }
            }
        })
    }

    function updateMessage($parent, $tbody, pageNum, pageSize) {
        var start = new Date().getTime();
        App.ajax({
            type: "POST",
            url: context + "/deviceUpgradeMessage/listByPage",
            data: {
                pageNum: pageNum,
                pageSize: pageSize
            },
            success: function (obj) {
                if (obj && obj.code == 0) {
                    console.log("查询升级日志耗时："+(new Date().getTime() - start));
                    var pageInfo = obj.data;
                    if (pageInfo && pageInfo.list && pageInfo.list.length > 0) {
                        $parent.find('input[name=update-message-page-num]').val(pageInfo.pageNum);
                        $parent.find('input[name=update-message-page-size]').val(pageInfo.pageSize);
                        $parent.find('input[name=update-message-pages]').val(pageInfo.pages);
                        for (var i = pageInfo.list.length - 1; i >= 0; i--) {
                            $tbody.prepend('<tr>' +
                                '<td>' +
                                '<p class="log">' + pageInfo.list[i].upgradeDetail + '</p>' +
                                '<p class="info"><span class="time">' + pageInfo.list[i].addTime + '</span></p>' +
                                '</td>' +
                                '</tr>');
                        }
                    }
                }
            }
        })
    }
</script>
</body>

</html>